﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Okala | HTML Template is built in a way so we can support businesses of different verticles and sizes, but not limited to Businesses, Agencies, Corporates, Startups, other considered businesses.">
    <meta name="keywords" content="business, clean, corporate, creative, modern, multipurpose, responsive, bootstrap, digital agency, minimal">
    <meta name="author" content="Okala">
    <title>Okala | HTML Template</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon"> 
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/all.min.css">
    <link rel="stylesheet" href="assets/css/animate.css">
    <link href="assets/css/LineIcons.min.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/lightcase.css">
    <link rel="stylesheet" href="assets/css/swiper.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/digital-agency.css">
</head>

<body id="top-page" class="search color1">
    <!-- preloader-->
    <div id="loading">
        <div id="loading-center">
            <div id="loading-center-absolute">
                <div class="object" id="object_one"></div>
                <div class="object" id="object_two"></div>
                <div class="object" id="object_three"></div>
                <div class="object" id="object_four"></div>
            </div>
        </div>
    </div>

    <!--search-body-->
    <div class="search-area">
        <div class="close-search">
            <span></span>
            <span></span>
        </div>
        <form action="#" class="search-form">
            <input type="text" name="search" placeholder="Write & Press Enter">
            <button><i class="fas fa-search"></i></button>

        </form>
    </div>

    <!-- start header section -->
    <header class="header style1 transparent-header">
        <!-- headertop -->
        <div class="header-top d-none d-lg-block">
            <div class="container d-lg-flex align-items-center justify-content-between">
                <div class="headertop-left">
                    <ul class="site-info m-0 p-0 list-unstyled">
                        <li><a href="tel:448448737363"><i class="fas fa-mobile-alt"></i> +4484 4873 7363</a></li>
                        <li><a href="mailto:info@example.com?Subject=Hello%20again" target="_top"><i class="far fa-paper-plane"></i> info@example.com</a></li>
                    </ul>
                </div>

                <div class="headertop-right d-flex flex-wrap">
                    <!-- language option -->
                    <div class="language-option dropdown">
                        <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">English</a>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                            <a class="dropdown-item" href="#">Bangla</a>
                            <a class="dropdown-item" href="#">Egnlish</a>
                            <a class="dropdown-item" href="#">Hindi</a>
                            <a class="dropdown-item" href="#">Urdhu</a>
                            <a class="dropdown-item" href="#">Chiness</a>
                        </div>
                    </div>
                    <!-- search option -->
                    <div class="search-option">
                        <i class="fas fa-search"></i>
                    </div>

                    <!-- social-media -->
                    <ul class="social-media-list d-flex m-0 p-0 list-unstyled">
                        <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                        <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                        <li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- main menu area -->
        <div class="main-menu-area mega-menu-header animated">
            <div class="container">
                <div class="row m-0 align-items-center">
                    <div class="col-lg-2 p-0 d-flex align-items-center justify-content-between">
                        <div class="logo">
                            <a class="navbar-brand" href="index.html"><img src="assets/images/logo-black.png" alt="logo"></a>
                            <a class="navbar-brand navbar-brand2" href="index.html"><img src="assets/images/logo-white.png" alt="logo"></a>
                        </div>
                        <div class="menu-bar d-lg-none">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                    <div class="col-lg-10 d-none d-lg-block p-0 d-lg-flex align-items-center justify-content-end justify-content-xl-end">
                        <div class="d-lg-flex flex-wrap justify-content-start">
                            <ul class="custom-border-top nav-menu d-lg-flex flex-wrap list-unstyled m-0 justify-content-center">
                                <li class="nav-item"><a href="index.html"><span>Home</span></a></li>
                                <li class="dropdown nav-item"><a href="#"><span>Pages<i class="fas fa-angle-down"></i></span></a>
                                    <ul class="submenu">
                                        <li><a href="about.html">About Us</a></li>
                                        <li class="dropdown"><a href="">Servcie<i class="fas fa-angle-right"></i></a>
                                             <ul class="submenu">
                                                <li><a href="service.html">Service</a></li>
                                                <li><a href="service-single.html">Service Single</a></li>
                                            </ul>
                                        </li>
                                        <li class="dropdown active"><a href="">Portfolio<i class="fas fa-angle-right"></i></a>
                                             <ul class="submenu">
                                               <li><a class="active-submenu" href="portfolio.html">Portfolio</a></li>
                                                <li><a href="portfolio-single.html">Portfolio Single</a></li>
                                            </ul>
                                        </li>
                                        <li class="dropdown"><a href="">Blog<i class="fas fa-angle-right"></i></a>
                                             <ul class="submenu">
                                               <li><a href="blog.html">Blog</a></li>
                                        <li><a href="single.html">Blog Single</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="contact.html">Contact Page</a></li>
                                        <li><a href="404-page.html">404 page</a></li>
                                        <li><a href="coming-soon-page.html">Comming Soon</a></li>
                                    </ul>
                                </li>
                                <li class="dropdown nav-item active"><a href="#"><span>Portfolio<i class="fas fa-angle-down"></i></span></a>
                                    <ul class="submenu">
                                        <li><a class="active-submenu" href="portfolio.html">Portfolio</a></li>
                                        <li><a href="portfolio-single.html">Portfolio Single</a></li>
                                    </ul>
                                </li>
                                <li class="nav-item dropdown"><a href="#"><span>Blog<i class="fas fa-angle-down"></i></span></a>
                                    <ul class="submenu">
                                        <li><a href="blog.html">Blog</a></li>
                                        <li><a href="single.html">Blog Single</a></li>
                                    </ul>
                                </li>
                               <li class="dropdown nav-item"><a href="#"><span>Service<i class="fas fa-angle-down"></i></span></a>
                                    <ul class="submenu">
                                        <li><a href="service.html">Service</a></li>
                                         <li><a href="service-single.html">Service Single</a></li>
                                    </ul>
                                </li>
                                <li class="nav-item"><a href="contact.html">Contact</a></li>
                            </ul>
                        </div>
                        <div class="menu-action-area d-none d-xl-flex flex-wrap justify-content-end ml_lg--30">
                            <ul class="menu-action list-unstyled m-0 p-0 d-flex flex-wrap justify-content-end">
                                <li><a class="da-custom-btn btn-border-radius40" href="#"><span>Discover Okala</span></a></li>
                            </ul>
                        </div>
                    </div>
                </div>


                <!-- mobile menu area-->
                <div class="mobile-menu-area d-lg-none">
                    <div class="m-menu-header">
                        <a href="#" class="logo"><img src="assets/images/logo-white.png" alt="logo"></a>
                        <span class="close-bar">
                                <span></span>
                                <span></span>
                            </span>
                    </div>
                    <div class="mobile-menu">
                        <ul class="m-menu">
                            <li><a href="index.html">Home</a></li>
                            <li class="m-active open"><a href="#">Pages <span class="arrow"><i class="fas fa-angle-right"></i></span></a>
                                <ul class="mobile-submenu">
                                    <li><a href="about.html">About Us</a></li>
                                    <li class="dropdown"><a href="">Servcie<span class="arrow"><i class="fas fa-angle-right"></i></span></a>
                                         <ul class="mobile-submenu">
                                            <li><a href="service.html">Service</a></li>
                                            <li><a href="service-single.html">Service Single</a></li>
                                        </ul>
                                    </li>
                                    <li class="dropdown m-active open"><a href="">Portfolio<span class="arrow"><i class="fas fa-angle-right"></i></span></a>
                                         <ul class="mobile-submenu">
                                           <li class="m-active"><a href="portfolio.html">Portfolio</a></li>
                                            <li><a href="portfolio-single.html">Portfolio Single</a></li>
                                        </ul>
                                    </li>
                                    <li class="dropdown"><a href="">Blog<span class="arrow"><i class="fas fa-angle-right"></i></span></a>
                                         <ul class="mobile-submenu">
                                           <li><a href="blog.html">Blog</a></li>
                                    <li><a href="single.html">Blog Single</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="contact.html">Contact Page</a></li>
                                    <li><a href="404-page.html">404 page</a></li>
                                    <li><a href="coming-soon-page.html">Comming Soon</a></li>
                                </ul>
                            </li>
                            <li class="m-active"><a href="#">Portfolio <span class="arrow"><i class="fas fa-angle-right"></i></span></a>
                                <ul class="mobile-submenu">
                                    <li class="m-active"><a href="portfolio.html">Portfolio</a></li>
                                    <li><a href="portfolio-single.html">Portfolio Single</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Blog <span class="arrow"><i class="fas fa-angle-right"></i></span></a>
                                <ul class="mobile-submenu">
                                    <li><a href="blog.html">Blog</a></li>
                                    <li><a href="single.html">Blog Single</a></li>
                                </ul>
                            </li>
                            <li><a href="contact.html">Contact Page</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- end header section -->

<!-- page header start -->
<section class="page-header portfolio">
    <div class="page-header-content">
        <div class="container">
            <div class="page-header-text">
                <h2>Portfolio 1</h2>
                <p>We help your brand to be recognizable</p>
            </div>
        </div>
    </div>
</section>
<!-- page header end-->



<!--service list section start-->
<section class="inner-page portfolio-page borderbottom">
    <div class="container p-0">
        <div class="section-header">
            <h2 class="title">We love to craft<br>Pixel perfect output for all</h2>
            <p class="desc mb-0">Over the years, we have worked with Fortune 500s and brand-new startups. We help ambitious businesses like yours generate more profits by building awareness, driving web traffic, connecting with customers, and growing overall sales. Give us a call.</p>
        </div>
    </div>


    <div class="bz-project-section pb--70 pb_lg--120">
        <div class="section-wrapper">
            <ul id="filters" class="button-group  wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.4s">
                <li class="button is-checked" data-filter="*">all Projects</li>
                <li class="button" data-filter=".development">Development</li>
                <li class="button" data-filter=".design">Design</li>
                <li class="button" data-filter=".photoshop">Photoshop</li>
                <li class="button" data-filter=".ui">UI/UX</li>
                <li class="button" data-filter=".java">JAVA</li>
            </ul>
            <div class="bz-project-container">
                <div class="element-item development photoshop" data-category="transition">
                    <div class="project-item">
                        <div class="project-thumb">
                            <a href="project_details.html"><img src="assets/images/project/01.jpg" alt="project"></a>
                            <div class="project-content">
                                <div class="project-content-inner">
                                    <p class="cata">Development</p>
                                    <h6 class="title"><a href="#">Simple & Effective</a></h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="element-item design ui" data-category="transition">
                    <div class="project-item">
                        <div class="project-thumb">
                            <a href="project_details.html"><img src="assets/images/project/02.jpg" alt="project"></a>
                            <div class="project-content">
                                <div class="project-content-inner">
                                    <p class="cata">Design</p>
                                    <h6 class="title"><a href="#">Simple & Effective</a></h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="element-item photoshop ui java" data-category="transition">
                    <div class="project-item">
                        <div class="project-thumb">
                            <a href="project_details.html"><img src="assets/images/project/03.jpg" alt="project"></a>
                            <div class="project-content">
                                <div class="project-content-inner">
                                    <p class="cata">UI/UX</p>
                                    <h6 class="title"><a href="#">Simple & Effective</a></h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="element-item development java" data-category="transition">
                    <div class="project-item">
                        <div class="project-thumb">
                            <a href="project_details.html"><img src="assets/images/project/04.jpg" alt="project"></a>
                            <div class="project-content">
                                <div class="project-content-inner">
                                    <p class="cata">JAVA</p>
                                    <h6 class="title"><a href="#">Simple & Effective</a></h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="element-item photoshop ui" data-category="transition">
                    <div class="project-item">
                        <div class="project-thumb">
                            <a href="project_details.html"><img src="assets/images/project/05.jpg" alt="project"></a>
                            <div class="project-content">
                                <div class="project-content-inner">
                                    <p class="cata">Photoshop</p>
                                    <h6 class="title"><a href="#">Simple & Effective</a></h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="element-item development design java" data-category="transition">
                    <div class="project-item">
                        <div class="project-thumb">
                            <a href="project_details.html"><img src="assets/images/project/06.jpg" alt="project"></a>
                            <div class="project-content">
                                <div class="project-content-inner">
                                    <p class="cata">Design</p>
                                    <h6 class="title"><a href="#">Simple & Effective</a></h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="element-item design ui" data-category="transition">
                    <div class="project-item">
                        <div class="project-thumb">
                            <a href="project_details.html"><img src="assets/images/project/07.jpg" alt="project"></a>
                            <div class="project-content">
                                <div class="project-content-inner">
                                    <p class="cata">Design</p>
                                    <h6 class="title"><a href="#">Simple & Effective</a></h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="element-item photoshop java" data-category="transition">
                    <div class="project-item">
                        <div class="project-thumb">
                            <a href="project_details.html"><img src="assets/images/project/08.jpg" alt="project"></a>
                            <div class="project-content">
                                <div class="project-content-inner">
                                    <p class="cata">Photoshop</p>
                                    <h6 class="title"><a href="#">Simple & Effective</a></h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--service list section end-->



<!--  acton section start -->
<section class="action-section style2 pt--100 pb--100">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 p-0">
                <div class="action-content text-center mb-4 mb-lg-0 text-lg-left">
                    <h4 class="title"> Start building beautiful pages in your browser Come and join us.</h4>
                </div>
            </div>
            <div class="col-lg-4 text-center text-lg-right p-0">
                <a href="#" class="da-custom-btn btn-border-radius40 btn-solid"><span>Purchase Plan</span></a>
            </div>
        </div>
    </div>
</section>
<!--  acton section end  -->




<!--  footer section start  -->
<footer class="footer footer1">
    <div class="footertop">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-lg-3 p-0">
                    <div class="footer-widget">
                        <a href="#" class="footer-logo"><img src="assets/images/logo-black.png" alt="logo"></a>
                        <p class="address">
                            555 California str, Suite 100
                            San Francisco, CA 94107
                        </p>
                        <ul class="footer-site-info">
                            <li><a href="tel:1(800)32134343">1(800) 32134343</a></li>
                            <li><a href="mailto:info@example.com?Subject=Hello%20again">info@example.com</a></li>
                        </ul>
                        <a href="#" class="googlemap">Google Map</a>
                    </div>
                </div>

                <div class="col-md-6 col-lg-3 p-0">
                    <div class="footer-widget">
                        <h4 class="footer-title">Navigate</h4>
                        <ul class="footer-menu">
                            <li><a href="index.html">Home</a></li>
                            <li><a href="#">Pages</a></li>
                            <li><a href="#">Portfolio</a></li>
                            <li><a href="#">Blog</a></li>
                            <li><a href="#">Element</a></li>
                            <li><a href="#">Features</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3 p-0">
                    <div class="footer-widget">
                        <h4 class="footer-title">Insight</h4>
                        <ul class="linklist">
                            <li><a href="#">Company</a></li>
                            <li><a href="#">Work Proces</a></li>
                            <li><a href="#">Portfolio</a></li>
                            <li><a href="#">Blog</a></li>
                            <li><a href="#">Features</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3 p-0">
                    <div class="footer-widget">
                        <h4 class="footer-title">Newsletter</h4>
                        <form action="#">
                            <input type="text" name="email" placeholder="Enter Your Email">
                            <button class="submit"><i class="lni-arrow-right"></i></button>
                        </form>
                        <p>Subscribe to our mailing list to receive new updates and special offers and other information</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="footerbottom">
			<div class="container">
				<div class="row justify-content-between align-items-center">
					<p class="m-0 copy-right">&copy; Copyright 2020 | <a href="index.html">Okala</a> All Rights <a href="http://www.bootstrapmb.com/">Themelazer</a></p>

					<!-- social-media -->
					<ul class="social-media-list d-flex flex-wrap m-0 p-0 list-unstyled">
						<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
						<li><a href="#"><i class="fab fa-twitter"></i></a></li>
						<li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
						<li><a href="#"><i class="fab fa-instagram"></i></a></li>
						<li><a href="#"><i class="fab fa-vimeo-v"></i></a></li>
					</ul>
				</div>
			</div>
		</div>
</footer>
<!--  footer section end  -->



<a href="#top-page" class="to-top js-scroll-trigger"><span><i class="fas fa-arrow-up"></i></span></a>



<script src='assets/js/jquery.min.js'></script>
<script src='assets/js/bootstrap.bundle.min.js'></script>
<script src='assets/js/swiper.min.js'></script>
<script src='assets/js/waypoints.min.js'></script>
<script src='assets/js/counterup.min.js'></script>
<script src='assets/js/isotope.min.js'></script>
<script src='assets/js/lightcase.js'></script>
<script src='assets/js/wow.min.js'></script>
<script src='assets/js/jquery-easeing.min.js'></script>
<script src='assets/js/jquery.countdown.min.js'></script>
<script src='assets/js/scroll-nav.js'></script>
<script src='assets/js/simpleParallax.js'></script>
<script src='assets/js/flip.min.js'></script>
<script src='assets/js/functions.js'></script>

</body>
</html>